import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
import {addUnit, createNamespace} from '../utils';
import {inherit} from '../utils/functional'; // Types

var _createNamespace = createNamespace('skeleton'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

var DEFAULT_ROW_WIDTH = '100%';
var DEFAULT_LAST_ROW_WIDTH = '60%';

function Skeleton(h, props, slots, ctx) {
    if (!props.loading) {
        return slots.default && slots.default();
    }

    function Title() {
        if (props.title) {
            return h("h3", {
                "class": bem('title'),
                "style": {
                    width: addUnit(props.titleWidth)
                }
            });
        }
    }

    function Rows() {
        var Rows = [];
        var rowWidth = props.rowWidth;

        function getRowWidth(index) {
            if (rowWidth === DEFAULT_ROW_WIDTH && index === props.row - 1) {
                return DEFAULT_LAST_ROW_WIDTH;
            }

            if (Array.isArray(rowWidth)) {
                return rowWidth[index];
            }

            return rowWidth;
        }

        for (var i = 0; i < props.row; i++) {
            Rows.push(h("div", {
                "class": bem('row'),
                "style": {
                    width: addUnit(getRowWidth(i))
                }
            }));
        }

        return Rows;
    }

    function Avatar() {
        if (props.avatar) {
            var size = addUnit(props.avatarSize);
            return h("div", {
                "class": bem('avatar', props.avatarShape),
                "style": {
                    width: size,
                    height: size
                }
            });
        }
    }

    return h("div", _mergeJSXProps([{
        "class": bem({
            animate: props.animate
        })
    }, inherit(ctx)]), [Avatar(), h("div", {
        "class": bem('content')
    }, [Title(), Rows()])]);
}

Skeleton.props = {
    title: Boolean,
    avatar: Boolean,
    row: {
        type: Number,
        default: 0
    },
    loading: {
        type: Boolean,
        default: true
    },
    animate: {
        type: Boolean,
        default: true
    },
    avatarSize: {
        type: String,
        default: '32px'
    },
    avatarShape: {
        type: String,
        default: 'round'
    },
    titleWidth: {
        type: [Number, String],
        default: '40%'
    },
    rowWidth: {
        type: [Number, String, Array],
        default: DEFAULT_ROW_WIDTH
    }
};
export default createComponent(Skeleton);